import React, { Component } from 'react';
import { Link, routerRedux } from 'dva/router';
import { connect } from 'dva';

import { List, InputItem, ImagePicker, Button, Toast, Flex,Icon,Tabs,WingBlank } from 'antd-mobile';
import { createForm } from 'rc-form';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import MyScroll from '../../components/MyScroll/MyScroll';
import { attestation } from './attestation.less';
import bitian from '../../assets/svg/bitian.svg';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import {apiURl, IMAGE_DOMAIN} from '../../utils/common';
import {articleLabel} from "./publish.less";
//import { common } from 'common';
const { Item } = List;


class Attestation extends Component {
    constructor(props) {
        super(props);
        this.state={
            isTitle:0,
            isRenzheng:this.props.match.params.class,
            disabled:false,
            value:"",
            files:[],
        }
        this.imgURL = [];
        this.name="";
        this.shenfenzheng="";
        this.phone="";
        this.content="";
        this.gongsiName="";
        this.gongsiArrdess="";
        this.cover = "";
    }


    onSubmit = () => {
        const { name,shenfenzheng,phone,content,gongsiName,gongsiArrdess } = this.props.form.getFieldsValue();
        console.log(this.imgURL.length,this.state.isRenzheng)
        if(this.imgURL.length==2&&this.state.isRenzheng=="geren"){
            this.props.dispatch({
                type:`findOthers/authenticationEFF`,
                obj:{
                    memberId:this.props.match.params.id,
                    trueName:this.name,
                    idNumber:this.shenfenzheng,
                    phoneNumber:this.phone,
                    images:this.imgURL.join(","),
                    description:this.content,
                    type:0
                }
            }).then(r=>{
                if(r.code==200){
                    Toast.success(r.msg,2,()=>{
                        this.setState({
                            isTitle:2
                        })
                    })
                }else{
                    Toast.fail(r.msg,2)
                }
            })
        }else if(this.imgURL.length==1&&this.state.isRenzheng=="qiye"){
            this.props.dispatch({
                type:`findOthers/authenticationEFF`,
                obj:{
                    memberId:this.props.match.params.id,
                    trueName:this.name,
                    idNumber:this.shenfenzheng,
                    phoneNumber:this.phone,
                    images:this.imgURL.join(","),
                    description:this.content,
                    organizationName:this.gongsiName,
                    organizationAddress:this.gongsiArrdess,
                    type:1
                }
            }).then(r=>{
                if(r.code==200){
                    Toast.success(r.msg,2,()=>{
                        this.setState({
                            isTitle:2
                        })
                    })
                }else{
                    Toast.fail(r.msg,2)
                }
            })
        }else if(this.imgURL.length==0){
            if(this.state.isRenzheng=="geren")Toast.info("请上传身份证正反面照片!")
            else Toast.info("请上传企业机构营业执照照片!")
        }else if(this.imgURL.length==1&&this.state.isRenzheng=="geren"){
            Toast.info("请上传身份证正反面照片!")
        }

    };
    next = ()=>{
        const { name,shenfenzheng,phone,content,gongsiName,gongsiArrdess } = this.props.form.getFieldsValue();
        if(this.state.isRenzheng=="geren"){
            if(!name){Toast.info("请填写姓名!");return false}
            if(!shenfenzheng){Toast.info("请填写身份证号码!");return false}
            if(!phone){Toast.info("请填写手机号码!");return false}
            if(!content){Toast.info("请填写认证描述!");return false}
            this.setState({
                isTitle:1
            });
            this.name=name;
            this.shenfenzheng=shenfenzheng;
            this.phone=phone;
            this.content=content;
        }else{
            if(!gongsiName){Toast.info("请填写机构名称!");return false}
            if(!gongsiArrdess){Toast.info("请填写机构地址!");return false}
            if(!name){Toast.info("请填写负责人姓名!");return false}
            if(!shenfenzheng){Toast.info("请填写身份证号码!");return false}
            if(!phone){Toast.info("请填写手机号码!");return false}
            if(!content){Toast.info("请填写认证描述!");return false}
            this.setState({
                isTitle:1
            })
            this.name=name;
            this.shenfenzheng=shenfenzheng;
            this.phone=phone;
            this.content=content;
            this.gongsiName=gongsiName;
            this.gongsiArrdess=gongsiArrdess;
        }

    };
    onChange = (e) => {
        let files = e.target.files;
        this.props.dispatch({type:"orderList/upLoadEFF",obj:{upfile: files[files.length - 1]}}).then(res =>{
            if(res.code==200){
                this.cover = res.ret.url;
                this.imgURL.push(this.cover);
                this.addElementPicture("picture",IMAGE_DOMAIN,this.cover);
                if(this.props.match.params.class=="geren"){
                    if(this.imgURL.length>=2) document.getElementById("shenfenPicture").style.display="none";
                }else{
                    if(this.imgURL.length>=1) document.getElementById("shenfenPicture").style.display="none";
                }

            }
        })
    }
    addElementPicture = (obj,a,b)=>{
        var parent = document.getElementById(obj);
        var img = document.createElement("img");
        var div = document.createElement("div");
        var div1= document.createElement("div");
        //设置 div 属性，如 id
        img.setAttribute("src",a+b);
        img.setAttribute("style","height:4rem;width:100%;z-index:1");
        div.setAttribute("style","height:4rem;width:100%;z-index:1;position:relative;marginBottom:.2rem;");
        div.setAttribute("class","child");
        div1.setAttribute("class","shanchu");
        div1.addEventListener("click",this.close1,false);
        div.appendChild(img);
        div.appendChild(div1);
        // parent.appendChild(div);
        parent.insertBefore(div,document.getElementById("shenfenPicture"));
    }
    close1=(e)=>{
        e.target.parentNode.remove();
        document.getElementById("shenfenPicture").style.display="flex";
    }
    render() {
        const { getFieldProps, getFieldError } = this.props.form;
        const { name,shenfenzheng,phone,content,gongsiName,gongsiArrdess } = this.props.form.getFieldsValue();
        const {isTitle,isRenzheng,disabled,value,files} = this.state;
        return (
            <Flex style={{
                height:"100%"
            }} direction="column"
                  className={attestation}
            >
                <NavTopBar dispatch={this.props.dispatch} title={isTitle==0?"基本信息":isTitle==1?"上传资料":isRenzheng=="geren"?"个人认证":"企业认证"} rightContent={isTitle==1?<span onClick={()=>{
                    this.onSubmit();
                }}>提交</span>:""}></NavTopBar>
                <MyScroll>
                    {isTitle==0?isRenzheng=="geren"? <List
                        renderFooter={() => getFieldError('username') && getFieldError('username').join(',')}
                    >
                        <InputItem
                            style={{fontSize: '.25rem'}}
                            {...getFieldProps('name')}
                            clear
                            placeholder="请输入真实姓名"
                            onBlur={(val)=>{
                                var reg = /^[\u4E00-\u9FA5]{2,4}$/;
                                if(!reg.test(val)){
                                    this.setState({
                                        value:"请输入正确姓名"
                                    })
                                }else{
                                    this.setState({
                                        value:""
                                    })
                                }
                            }}
                        ><Flex>
                            <Icon type={bitian.id} style={{width:".2rem",height:".2rem"}}/><span>姓名</span>
                        </Flex>
                        </InputItem>
                        <InputItem
                            style={{fontSize: '.25rem'}}
                            {...getFieldProps('shenfenzheng')}
                            clear
                            placeholder="请输入身份证号码"
                            onBlur={(val)=>{
                                var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                                if(!reg.test(val)){
                                    this.setState({
                                        value:"请输入正确身份证号码"
                                    })
                                }else{
                                    this.setState({
                                        value:""
                                    })
                                }
                            }}
                        ><Flex>
                            <Icon type={bitian.id} style={{width:".2rem",height:".2rem"}}/><span>身份证号码</span>
                        </Flex>
                        </InputItem>
                        <InputItem
                            style={{fontSize: '.25rem'}}
                            {...getFieldProps('phone')}
                            clear
                            type="number"
                            placeholder="输入11位手机号"
                            onBlur={(val)=>{
                                var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
                                if(!reg.test(val)){
                                    this.setState({
                                        value:"请输入正确手机号码"
                                    })
                                }else{
                                    this.setState({
                                        value:""
                                    })
                                }
                            }}
                        ><Flex>
                            <Icon type={bitian.id} style={{width:".2rem",height:".2rem"}}/><span>手机号</span>
                        </Flex>
                        </InputItem>
                        <InputItem
                            style={{fontSize: '.25rem'}}
                            {...getFieldProps('content')}
                            clear
                            placeholder="该描述会影响审核,请慎重填写"
                        >
                            <Flex>
                                <Icon type={bitian.id} style={{width:".2rem",height:".2rem"}}/><span>认证描述</span>
                            </Flex></InputItem>
                        <Item >
                            <span style={{color:"#ff0036"}}>{value}</span>
                        </Item>
                        <Item style={{ backgroundColor: '#f7f7f7', paddingTop: '.7rem' }}>
                            <Button type="primary" disabled={disabled} onClick={this.next} style={{borderRadius:".5rem"}} >下一步</Button>
                        </Item>

                    </List>:<List
                        renderFooter={() => getFieldError('username') && getFieldError('username').join(',')}
                    >
                        <InputItem
                            style={{fontSize: '.25rem'}}
                            {...getFieldProps('gongsiName')}
                            clear
                            placeholder="请输入机构名称"
                        ><Flex>
                            <Icon type={bitian.id} style={{width:".2rem",height:".2rem"}}/><span>机构名称</span>
                        </Flex>
                        </InputItem>
                        <InputItem
                            style={{fontSize: '.25rem'}}
                            {...getFieldProps('gongsiArrdess')}
                            clear
                            placeholder="请输入机构地址"
                        ><Flex>
                            <Icon type={bitian.id} style={{width:".2rem",height:".2rem"}}/><span>机构地址</span>
                        </Flex>
                        </InputItem>
                        <InputItem
                            style={{fontSize: '.25rem'}}
                            {...getFieldProps('name')}
                            clear
                            placeholder="请填写机构负责人"
                            onBlur={(val)=>{
                                var reg = /^[\u4E00-\u9FA5]{2,4}$/;
                                if(!reg.test(val)){
                                    this.setState({
                                        value:"请输入正确姓名"
                                    })
                                }else{
                                    this.setState({
                                        value:""
                                    })
                                }
                            }}
                        ><Flex>
                            <Icon type={bitian.id} style={{width:".2rem",height:".2rem"}}/><span>负责人</span>
                        </Flex>
                        </InputItem>
                        <InputItem
                            style={{fontSize: '.25rem'}}
                            {...getFieldProps('shenfenzheng')}
                            clear
                            placeholder="请输入身份证号码"
                            onBlur={(val)=>{
                                var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                                if(!reg.test(val)){
                                    this.setState({
                                        value:"请输入正确身份证号码"
                                    })
                                }else{
                                    this.setState({
                                        value:""
                                    })
                                }
                            }}
                        ><Flex>
                            <Icon type={bitian.id} style={{width:".2rem",height:".2rem"}}/><span>身份证号码</span>
                        </Flex>
                        </InputItem>
                        <InputItem
                            style={{fontSize: '.25rem'}}
                            {...getFieldProps('phone')}
                            clear
                            type="number"
                            placeholder="输入11位手机号"
                            onBlur={(val)=>{
                                var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
                                if(!reg.test(val)){
                                    this.setState({
                                        value:"请输入正确手机号码"
                                    })
                                }else{
                                    this.setState({
                                        value:""
                                    })
                                }
                            }}
                        ><Flex>
                            <Icon type={bitian.id} style={{width:".2rem",height:".2rem"}}/><span>负责人电话</span>
                        </Flex>
                        </InputItem>
                        <InputItem
                            style={{fontSize: '.25rem'}}
                            {...getFieldProps('content')}
                            clear
                            placeholder="该描述会影响审核,请慎重填写"
                        >
                            <Flex>
                                <Icon type={bitian.id} style={{width:".2rem",height:".2rem"}}/><span>认证描述</span>
                            </Flex></InputItem>
                        <Item >
                            <span style={{color:"#ff0036"}}>{value}</span>
                        </Item>
                        <Item style={{ backgroundColor: '#f7f7f7', paddingTop: '.7rem' }}>
                            <Button type="primary" disabled={disabled} onClick={this.next} style={{borderRadius:".5rem"}} >下一步</Button>
                        </Item>

                    </List>:""}
                    {isTitle==1?<List>
                        <Item>{isRenzheng=="geren"?"上传身份证正反面照片":"上传企业机构营业执照正反面照片"}</Item>
                        <Item>
                            <div id="picture">
                                <label htmlFor="pictureFile" id="shenfenPicture" className={articleLabel}>
                                    + &nbsp;&nbsp;上传照片
                                </label>
                                <input accept="image/*" multiple type="file" id="pictureFile" style={{display:"none"}} onChange={this.onChange}/>
                            </div>
                        </Item>
                    </List>:""}
                    {isTitle==2?isRenzheng=="geren"?<div>
                            <Flex justify="center" style={{color:"#fff",width:"100%",marginBottom:".2rem",padding:".2rem 0",background:"#A8DBCB"}}>
                                认证消息审核中,我们会在7个工作日内给您答复
                            </Flex>
                            <List>
                                <Item extra={this.name}>真实姓名</Item>
                                <Item extra={this.shenfenzheng}>身份证号码</Item>
                                <Item extra={this.phone}>手机号码</Item>
                                <Item extra={this.content}>认证描述</Item>
                                <Item  extra={this.imgURL.map((a,b)=>{
                                    return <NoLazyImg src={a} key={b} style={{width:"1.5rem",height:"1.5rem",marginRight:".3rem"}}></NoLazyImg>
                                })}>认证资料</Item>
                            </List>
                        </div>:
                        <div>
                            <Flex justify="center" style={{color:"#fff",width:"100%",marginBottom:".2rem",padding:".2rem 0",background:"#A8DBCB"}}>
                                认证消息审核中,我们会在7个工作日内给您答复
                            </Flex>
                            <List>
                                <Item extra={this.gongsiName}>机构名称</Item>
                                <Item extra={this.gongsiArrdess}>机构地址</Item>
                                <Item extra={this.name}>真实姓名</Item>
                                <Item extra={this.shenfenzheng}>身份证号码</Item>
                                <Item extra={this.phone}>手机号码</Item>
                                <Item extra={this.content}>认证描述</Item>
                                <Item  extra={this.imgURL.map((a,b)=>{
                                    return <NoLazyImg src={a} key={b} style={{width:"1.5rem",height:"1.5rem",marginRight:".3rem"}}></NoLazyImg>
                                })}>认证资料</Item>
                            </List>
                        </div>
                        :""}
                </MyScroll>


            </Flex>
        );
    }
}

export default connect(({ findOthers,orderList }) => ({ findOthers,orderList }))(createForm()(Attestation));
